<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initail-scale=1" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<!--手机端手风琴引用css-->
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
		<!--自定义css引用-->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--视频控件的引用-->
		<link rel="stylesheet" type="text/css" href="dplayer/DPlayer.min.css"/>
	</head>
	<body>
		<!--top start-->
		<div class="container top hidden-xs">
			<div class="row">
				<div class="col-md-2 col-sm-2">
					<a href="#" class="top-a">
						<i class="glyphicon glyphicon-home"></i>
						<span>关注微信号</span>
						<i class="caret hidden-sm"></i>
						<img src="img/erweima.png"/>
					</a>
				</div>
				<div class="col-md-5 col-sm-5">
					<a href="#">
						<i class="glyphicon glyphicon-phone-alt"></i>
						<span>888-66-555(服务时间：8:00-18:00)</span>
					</a>
				</div>
				<div class="col-md-2 col-sm-2 hidden-sm">
					<a href="#">
						<i class="glyphicon glyphicon-education"></i>
						<span>合作院校-讲师</span>
					</a>
				</div>
				<div class="col-md-3 col-sm-3">
					<button class="btn btn-info btn-sm">免费注册</button>
					<button class="btn btn-default btn-sm">登录</button>
				</div>
			</div>
		</div>
		<!--start end-->
		<!--nav start-->
		<div class="container top-nav">
			<nav class="navbar navbar-default">
			  <div class="container-fluid">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"  aria-expanded="false">
			        <span class="sr-only">切换导航</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#">
			      	<span class="bglogo"></span>
			      </a>
			    </div>
			    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			      <ul class="nav navbar-nav"  id="mt-15">
			        <li><a href="#" class="active">首页 <span class="sr-only">(current)</span></a></li>
			        <li><a href="#">在线编程</a></li>
			        <li><a href="#">百里办公开课</a></li>
					<li><a href="#">项目mall</a></li>
					<li class="hidden-sm"><a href="#">开班计划</a></li>
					<li class="hidden-sm"><a href="#">企业招聘</a></li>
			      </ul>
			      <ul class="nav navbar-nav navbar-right" id="mt-15">
			        <li><a href="#">面试题库</a></li>
			      </ul>
			    </div>
			  </div>
			</nav>
		</div>
		<!--nav end-->
		<!--lunbo start-->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
			  </ol>
			  <div class="carousel-inner" role="listbox" id="mt-15">
			    <div class="item active" data-image-md="img/lb2.jpg" data-image-xs="img/slb2.png"></div>
			    <div class="item" data-image-md="img/lb1.jpg" data-image-xs="img/slb1.png"></div>
			    <div class="item" data-image-md="img/lb3.png" data-image-xs="img/slb3.png"></div>
				<div class="item" data-image-md="img/lb4.jpg" data-image-xs="img/slb4.png"></div>
			  </div>
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		<!--lunbo end-->
		<!--renwu start-->
		<div class="container" id="mt-15">	
			<div class="row">
				<span class="symbol"></span>
				<h3 class="text">我的任务</h3>
				<small>每天进步一点点</small>
			</div>
			<div class="row">
				<div class="col-md-2 col-sm-4 col-xs-6 distance">
					<a href="#">
						<h4 class="renwu1">强化训练</h4>
						<span class="renwu-span1"></span>
						<div class="line">
							<span class="top-line"></span>
							<span class="bottom-line"></span>
							<span class="left-line"></span>
							<span class="right-line"></span>
						</div>
					</a>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 distance">
					<a href="#">
						<h4 class="renwu2">模拟笔试</h4>
						<span class="renwu-span2"></span>
						<div class="line">
							<span class="top-line"></span>
							<span class="bottom-line"></span>
							<span class="left-line"></span>
							<span class="right-line"></span>
						</div>
					</a>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 distance">
					<a href="#">
						<h4 class="renwu3">每日一测</h4>
						<span class="renwu-span3"></span>
						<div class="line">
							<span class="top-line"></span>
							<span class="bottom-line"></span>
							<span class="left-line"></span>
							<span class="right-line"></span>
						</div>
					</a>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 distance">
					<a href="#">
						<h4 class="renwu4">每月一考</h4>
						<span class="renwu-span4"></span>
						<div class="line">
							<span class="top-line"></span>
							<span class="bottom-line"></span>
							<span class="left-line"></span>
							<span class="right-line"></span>
						</div>
					</a>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 distance">
					<a href="#">
						<h4 class="renwu5">考证专题</h4>
						<span class="renwu-span5"></span>
						<div class="line">
							<span class="top-line"></span>
							<span class="bottom-line"></span>
							<span class="left-line"></span>
							<span class="right-line"></span>
						</div>
					</a>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 distance">
					<a href="#">
						<h4 class="renwu6">面试专题</h4>
						<span class="renwu-span6"></span>
						<div class="line">
							<span class="top-line"></span>
							<span class="bottom-line"></span>
							<span class="left-line"></span>
							<span class="right-line"></span>
						</div>
					</a>
				</div>
			</div>
		</div>
		<!--renwu end-->
		<!--aboutus start-->
		<div class="container">
			<div class="row">
				<span class="symbol"></span>
				<h3 class="text">关于我们</h3>
				<small>有我们，未来更美好</small>
			</div>
			<div class="row">
				<div class="col-md-8 col-sm-8 col-xs-12">
					<div class="dp" id="dp"></div>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12 hidden-xs" id="aboutus-right">
					<h5 class="aboutus-h5">最新动态</h5>
					<small>小标题</small>
					<a href="#" class="aboutus-a">更多</a>
					<ul class="list-group">
					  <li class="list-group-item">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">Web全栈就业班5个月面授加一个月面试题</a>
					  </li>
					  <li class="list-group-item">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">希望你在使用时尽量为Glyphicons添加一个友情链接</a>
					  </li>
					  <li class="list-group-item">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">Glyphicons Halflings一般是收费的，</a>
					  </li>
					  <li class="list-group-item">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">如果我的字特别多，怎么办？？？如果我的字特别多，怎么办？？？</a>
					  </li>
					  <li class="list-group-item">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">bootstrap4+玩转响应式开发+一套代码适配多页面</a>
					  </li>
					  <li class="list-group-item hidden-sm">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">从零玩转bootstrap+项目实战</a>
					  </li>
					  <li class="list-group-item hidden-sm">
					  	<i class="glyphicon glyphicon-star"></i><a href="#">2020年Web全栈开发工程师课程要这么设计</a>
					  </li>
					</ul>
				</div>
			</div>
		</div>
		<!--aboutus end-->
		<!--zhengti start-->
		<div class="container">
			<div class="row">
				<span class="symbol"></span>
				<h3 class="text">模拟真题</h3>
				<small>真题测试</small>
			</div>
			<div class="row">
				<div class="col-md-3 col-sm-3 col-xs-6 zhengti-distance">
					<a href="#">
						<span class="zhengti-span1">
							<img src="img/zt_1.png" class="img-responsive"/>
							<p>奇安信2020java工程师面试真题</p>
						</span>
					</a>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 zhengti-distance">
					<a href="#">
						<span class="zhengti-span2">
							<img src="img/zt_2.png" class="img-responsive"/>
							<p>爱奇艺2020校招真题</p>
						</span>
					</a>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 zhengti-distance">
					<a href="#">
						<span class="zhengti-span3">
							<img src="img/zt_3.png" class="img-responsive"/>
							<p>粗粮2020真题校招笔试</p>
						</span>
					</a>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 zhengti-distance">
					<a href="#">
						<span class="zhengti-span4">
							<img src="img/zt_4.png" class="img-responsive"/>
							<p>快手2020校招算法真题</p>
						</span>
					</a>
				</div>
			</div>
		</div>
		<!--zhengti end-->
		<!--kecheng start-->
		<div class="container kecheng">
			<div class="row">
				<span class="symbol"></span>
				<h3 class="text">课程体系</h3>
				<small>web/java/php/python/.net...</small>
			</div>
			<div class="row">
				<div class="col-md-2 col-sm-2 col-xs-3 col-distance">
					<h3 class="kecheng-text">开设学科</h3>
					<a href="#">
						<span class="xueke-span1">
							<img src="img/web01.png"/>
							<p>web全栈开发工程师</p>
						</span>
					</a>
					<a href="#">
						<span class="xueke-span1">
							<img src="img/java02.png"/>
							<p>web全栈开发工程师</p>
						</span>
					</a>
					<a href="#">
						<span class="xueke-span2">
							<img src="img/php03.png"/>
							<p>web全栈开发工程师</p>
						</span>
					</a>
				</div>
				<div class="col-md-2 col-sm-2 hidden-xs kecheng-distance col-distance">
					<h3 class="kecheng-text">课程体系</h3>
					<a href="#">
						<span class="kecheng-span1">
							<img src="img/tx2.png"/>
							<p>web前端技能培养目标</p>
						</span>
					</a>
					<a href="#">
						<span class="kecheng-span1">
							<img src="img/tx3.png"/>
							<p>web前端技能培养目标</p>
						</span>
					</a>
					<a href="#">
						<span class="kecheng-span2">
							<img src="img/tx4.png"/>
							<p>web前端技能培养目标</p>
						</span>
					</a>
					<a href="#">
						<span class="kecheng-span2">
							<img src="img/tx5.png"/>
							<p>web前端技能培养目标</p>
						</span>
					</a>
				</div>
				<div class="col-md-2 col-sm-2 hidden-xs col-distance">
					<h3 class="kecheng-text">周期</h3>
					<div class="dianchi">
						<div class="dc-head"></div>
						<div class="dc-body" id="dc1">
							<div class="dc-text"></div>
						</div>
					</div>
					<div class="dianchi">
						<div class="dc-head"></div>
						<div class="dc-body" id="dc2">
							<div class="dc-text"></div>
						</div>
					</div>
					<div class="dianchi">
						<div class="dc-head"></div>
						<div class="dc-body" id="dc3">
							<div class="dc-text"></div>
						</div>
					</div>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-9 col-distance">
					<h3 class="kecheng-text" id="text">开班计划<span class="freeStudy">免费试学一个月</span></h3>
					<table class="table table-hover table1">
						<tr>
							<td>Web全栈01期</td>
							<td>07/15开班</td>
							<td><button class="btn btn-info">预约报名</button></td>
						</tr>
						<tr>
							<td>Web全栈01期</td>
							<td>07/15开班</td>
							<td><button class="btn btn-info">预约报名</button></td>
						</tr>
						<tr>
							<td>Web全栈01期</td>
							<td>07/15开班</td>
							<td><button class="btn btn-info">预约报名</button></td>
						</tr>
						<tr>
							<td>Web全栈01期</td>
							<td>07/15开班</td>
							<td><button class="btn btn-info">预约报名</button></td>
						</tr>
						<tr>
							<td>Web全栈01期</td>
							<td>07/15开班</td>
							<td><button class="btn btn-info">预约报名</button></td>
						</tr>
						<tr>
							<td>Web全栈01期</td>
							<td>07/15开班</td>
							<td><button class="btn btn-info">预约报名</button></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!--kecheng end-->
		<!--huiyuan start-->
		<div class="container" id="mt-15">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12 col-distance">
					<ul class="nav nav-tabs">
					  <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">会员专享</a></li>
					  <li role="presentation"><a href="#tab2" data-toggle="tab">线下沙龙</a></li>
					  <li role="presentation"><a href="#tab3" data-toggle="tab">精品课程</a></li>
					  <li role="presentation"><a href="#tab4" data-toggle="tab">面试宝典</a></li>
					</ul>
				</div>
			</div>
			<div class="tab-content">
				<div class="tab-pane active" id="tab1">
					<div class="row row-huiyuan">
						<div class="col-md-8 col-sm-8 col-xs-12">
							<p><img src="img/erweima.png"/></p>
							<h1>百里半会员优惠</h1>
							<p>停课不停学!项目任务每周一、每周二12:00更新!随着互联网技术的飞速发展,政府部门为了充分利用互联网平台,
							更好地实现线上线下、多部门联动,更好地解决市民遇到的问题，从而打造了政务互动平台。弥补了之前市长信箱，
							市长热线交流的不足。"政务互动平台”能够更好地满足公众及内部业务要求。</p>
							<button class="btn btn-info btn-lg">了解更多</button>
						</div>
						<div class="col-md-4 col-sm-4 col-xs-12 col-img">
							<img src="img/iphoneX1.jpg"/>	
						</div>
					</div>
				</div>
				<div class="tab-pane" id="tab2">
					<div class="row row-huiyuan">
						<div class="col-md-8 col-sm-8 col-xs-12">
							<p><img src="img/erweima.png"/></p>
							<h1>百里半会员优惠</h1>
							<p>停课不停学!项目任务每周一、每周二12:00更新!随着互联网技术的飞速发展,政府部门为了充分利用互联网平台,
							更好地实现线上线下、多部门联动,更好地解决市民遇到的问题，从而打造了政务互动平台。弥补了之前市长信箱，
							市长热线交流的不足。"政务互动平台”能够更好地满足公众及内部业务要求。</p>
							<button class="btn btn-info btn-lg">了解更多</button>
						</div>
						<div class="col-md-4 col-sm-4 col-xs-12 col-img">
							<img src="img/iphoneX1.jpg"/>		
						</div>
					</div>
				</div>
				<div class="tab-pane" id="tab3">
					<div class="row row-huiyuan">
						<div class="col-md-8 col-sm-8 col-xs-12">
							<p><img src="img/erweima.png"/></p>
							<h1>百里半会员优惠</h1>
							<p>停课不停学!项目任务每周一、每周二12:00更新!随着互联网技术的飞速发展,政府部门为了充分利用互联网平台,
							更好地实现线上线下、多部门联动,更好地解决市民遇到的问题，从而打造了政务互动平台。弥补了之前市长信箱，
							市长热线交流的不足。"政务互动平台”能够更好地满足公众及内部业务要求。</p>
							<button class="btn btn-info btn-lg">了解更多</button>
						</div>
						<div class="col-md-4 col-sm-4 col-xs-12 col-img">
							<img src="img/iphoneX1.jpg"/>		
						</div>
					</div>
				</div>
				<div class="tab-pane" id="tab4">
					<div class="row row-huiyuan">
						<div class="col-md-8 col-sm-8 col-xs-12">
							<p><img src="img/erweima.png"/></p>
							<h1>百里半会员优惠</h1>
							<p>停课不停学!项目任务每周一、每周二12:00更新!随着互联网技术的飞速发展,政府部门为了充分利用互联网平台,
							更好地实现线上线下、多部门联动,更好地解决市民遇到的问题，从而打造了政务互动平台。弥补了之前市长信箱，
							市长热线交流的不足。"政务互动平台”能够更好地满足公众及内部业务要求。</p>
							<button class="btn btn-info btn-lg">了解更多</button>
						</div>
						<div class="col-md-4 col-sm-4 col-xs-12 col-img">
							<img src="img/iphoneX1.jpg"/>		
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--huiyuan end-->
		<!--gongzuo start-->
		<div class="container">
			<div class="row">
				<span class="symbol"></span>
				<h3 class="text">工作环境</h3>
				<small>没有最好，只有更好</small>
			</div>
			<div class="row">
				<!--PC端手风琴-->
				<div class="col-md-12 col-sm-12 hidden-xs col-distance">
					<div class="accordion" id="demo">
		              <ul class="accordion__ul">
		                <li class="accordion__li">
		                  <img class="accordion__img" src="img/1.jpg" alt="Image 1">
		                </li>
		                <li class="accordion__li">
		                  <img class="accordion__img" src="img/2.jpg" alt="Image 2">
		                </li>
		                <li class="accordion__li">
		                  <img class="accordion__img" src="img/3.jpg" alt="Image 3">
		                </li>
		                <li class="accordion__li">
		                  <img class="accordion__img" src="img/4.jpg" alt="Image 3">
		                </li>
		                <li class="accordion__li">
		                  <img class="accordion__img" src="img/5.jpg" alt="Image 3">
		                </li>
		              </ul>
		            </div> 
				</div>
				<!--PC端手风琴-->
				<!--手机端手风琴-->
				<div class="col-xs-12 hidden-lg hidden-md hidden-sm">
					<div class="swiper-container">
						 <div class="swiper-wrapper">
						      <div class="swiper-slide">
						      		<img src="img/1.jpg"/>
						      </div>
						      <div class="swiper-slide">
						      		<img src="img/2.jpg"/>
						      </div>
						      <div class="swiper-slide">
						      		<img src="img/3.jpg"/>
						      </div>
						      <div class="swiper-slide">
						      		<img src="img/4.jpg"/>
						      </div>
						      <div class="swiper-slide">
						      		<img src="img/5.jpg"/>
						      </div>
						 </div>
					</div>
				</div>
				<!--手机端手风琴-->
			</div>
		</div>
		<!--gongzuo end-->
		<!--mingshi start-->
		<div class="container">
			<div class="row">
				<span class="symbol"></span>
				<h3 class="text">名师指导</h3>
				<small>没有最好，只有更好</small>
			</div>
			<div class="row">
				<div class="col-md-3 col-sm-3 col-xs-6">
					<span class="mingshi1">
						<div class="dplayer1" id="d1"></div>
						<p>厚薄教学总监&百里半创始人</p>
						<h4>张小云</h4>
					</span>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6">
					<span class="mingshi1">
						<div class="dplayer2" id="d2"></div>
						<p>厚薄教学总监&百里半创始人</p>
						<h4>张小云</h4>
					</span>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6">
					<span class="mingshi1">
						<div class="dplayer3" id="d3"></div>
						<p>厚薄教学总监&百里半创始人</p>
						<h4>张小云</h4>
					</span>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6">
					<span class="mingshi1">
						<div class="dplayer4" id="d4"></div>
						<p>厚薄教学总监&百里半创始人</p>
						<h4>张小云</h4>
					</span>
				</div>
			</div>
		</div>
		<!--mingshi end-->
		<!--bangzhu start-->
		<div class="container" id="mt-15">
			<div class="row row-bangzhu">
				<div class="col-md-2 col-sm-2 col-xs-6 col-bangzhu">
					<dl>
						<dt>帮助中心</dt>
						<dd>账户管理</dd>
						<dd>相关下载</dd>
						<dd>加入厚薄</dd>
						<dd>官方微信</dd>
					</dl>
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6 col-bangzhu">
					<dl>
						<dt>帮助中心</dt>
						<dd>账户管理</dd>
						<dd>相关下载</dd>
						<dd>加入厚薄</dd>
						<dd>官方微信</dd>
					</dl>
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6 col-bangzhu">
					<dl>
						<dt>帮助中心</dt>
						<dd>账户管理</dd>
						<dd>相关下载</dd>
						<dd>加入厚薄</dd>
						<dd>官方微信</dd>
					</dl>
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6 col-bangzhu">
					<dl>
						<dt>帮助中心</dt>
						<dd>账户管理</dd>
						<dd>相关下载</dd>
						<dd>加入厚薄</dd>
						<dd>官方微信</dd>
					</dl>
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6 col-bangzhu">
					<dl>
						<dt>帮助中心</dt>
						<dd>账户管理</dd>
						<dd>相关下载</dd>
						<dd>加入厚薄</dd>
						<dd>官方微信</dd>
					</dl>
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6 col-bangzhu">
					<h5>027-XXXXXXXXX</h5>
					<h4>免费咨询</h4>
					<button class="btn btn-info btn-lg"><i class="glyphicon glyphicon-comment"></i>人工服务</button>
				</div>
			</div>
			<div class="row">
				<div class="col-md-8 col-sm-8 col-xs-8 bangzhu-distance1">
					<h4><img src="img/footer_logo.png"/></h4>
					<p>友情链接：厚薄教育</p>
					<p>地址:北京市海淀区中关村南大街36号12号楼18层1801号260版权信息:北京百里半网络技术有限公司</p>
					<p>网址: http://www.bailiban.comICP备18026820号</p>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-4 bangzhu-distance2">
					<img src="img/erweima.png"/>
					<img src="img/APPIcon.png"/>
				</div>
			</div>
		</div>
		<!--bangzhu end-->
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<!--PC端手风琴js引用-->
		<script src="js/zA7n.js"></script>
		<script src="js/limit.js"></script>
		<!--手机端手风琴引用-->
		<script src="js/swiper-bundle.min.js"></script>
		<!--自定义js引用-->
		<script src="js/index.js"></script>
		<!--视频控件js引用-->
		<script src="dplayer/hls.min.js"></script>
		<script src="dplayer/flv.min.js"></script>
		<script src="dplayer/DPlayer.min.js"></script>
		<!--轮播图和手风琴js-->
		<script type="text/javascript">
			$(function(){
				$("#carousel-example-generic").carousel({
					//轮播图的延时显示
					interval:500
				});
				$("#demo").zA7n();
 				var swiper = new Swiper('.swiper-container');
			});
		</script>
	</body>
</html>
